<template>
  <div :class="['hlist']">
    <h-list-item
      :class="[active == i ? 'actives' : '']"
      v-for="(item, i) in data"
      v-bind="item"
      :key="item.id + '-' + i"
      :item="item"
      :type="type"
      :hideFooter="hideFooter"
      :hideRight="hideRight"
      :hideOrder="hideOrder"
      :theme="theme"
      :hideToolTip="hideToolTip"
      :hideMore="hideMore"
      @click.native="select(item, i)"
      @handle="$emit('handle', item)"
      @detail="$emit('detail', item)"
      @addWatch="$emit('addWatch', item)"></h-list-item>
    <div v-if="pagination" class="hlist-pagination" style="">
      <a-pagination v-model="current" v-bind="paginationConfig" @change="$emit('change', $event)" />
    </div>
  </div>
</template>
<script>
export default {
  name: 'HList',
  props: {
    type: {
      type: String,
      default: 'default'
    },
    hideMore: {
      type: Boolean,
      default: true
    },
    data: {
      type: Array,
      defalut: () => {
        return [];
      }
    },
    pagination: {
      type: [Object, Boolean],
      default: false
    },
    hideFooter: {
      type: Boolean,
      default: false
    },
    hideRight: {
      type: Boolean,
      default: false
    },
    hideOrder: {
      type: Boolean,
      default: false
    },
    hideToolTip: {
      type: Boolean,
      default: false
    },
    theme: {
      type: String,
      default: 'light'
    }
  },
  data() {
    return {
      active: 0,
      current: 1,
      params: {
        total: 100,
        showLessItems: true
      },
      paginationConfig: {}
    };
  },
  created() {
    this.paginationConfig = Object.assign({}, this.params, typeof this.pagination == 'boolean' ? {} : this.pagination);
  },
  watch: {
    pagination: {
      handler(val) {
        console.log('weatch val');
        this.paginationConfig = Object.assign({}, this.params, typeof val == 'boolean' ? {} : val);
      },
      deep: true,
      immediate: true
    }
  },
  methods: {
    select(e, i) {
      this.active = i;
      this.$emit('select', e);
      console.log(i);
    }
  }
};
</script>
<style lang="less" scoped>
.hlist {
  // position: relative;
  // height: 80%;
  width: 100%;
}
.hlist-pagination {
  text-align: center;
  position: absolute;
  bottom: 20px;
  width: calc(100% - 48px);
}
</style>
